<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
<div class="main-container">

		<!-- header -->
		<header>
        	<a href="#" class="f">
            	<img src="images/logo.png" alt="Netlog" />
            </a>
            <a href="#" class="logout f-r">Log out</a>
            <div class="clearfix"></div>
        </header>
        
        <!-- tabs side bar-->
        
        <aside class="f">
        	<div class="sep"></div>
			<nav>
            	<div href="#" class="tabs f ta-c">
            		<a href="" class="notifaction-link active"></a>
                	<div>Notification</div>
            	</div>
            
            	<div href="#" class="tabs f ta-c">
            		<a href="" class="friends-link"></a>
                	<div>Friends Log</div>
            	</div>
            
            	<div href="#" class="tabs f ta-c">
            		<a href="" class="visitors-link"></a>
                	<div>Visitors</div>
            	</div>
            
            	<div href="#" class="tabs f ta-c">
            		<a href="" class="photo-link"></a>
                	<div>Upload Photo</div>
            	</div>
            </nav>
		</aside>
        
        <!-- content -->
        
        <article class="content f-r">
        	<h2>
            	<img src="images/notification-header.png" alt="" />
            	Notification
            </h2>
            <div class="scrollable-area">
            	<section class="gray-round">
                    	<a href="#">
                        Thomas Bouve
                        	<span>shouts</span>
                        </a>
                        <p>
                        	Vivamus aliquet, est vel cursus egestas, dui enim placerat massa, id adipiscing urna enim eu neque
                        </p>
                        <p class="time">Today at 12:32</p>
                </section>
                <section class="gray-round">
                    	<a href="#">
                        Thomas Bouve
                        	<span>shouts</span>
                        </a>
                        <p>
                        	nunc interdum nec semper diam consequat. Donec fermentum, ante nec scelerisque varius, felis sem ultrices sapien, et 
                        </p>
                        <p class="time">Today at 11:47</p>
                </section>
            </div>
        </article>
            
    </div>
</body>
</html>
